<?php
/**
 * 通用容器布局组件（含依赖组件管理）
 * 支持通过dependencies字段声明子组件，定义组件类型、属性及排列规则
 * @param array $pageConfig 页面配置（需包含 components.container 节点）
 * @return void
 */
$configKey = isset($configKey) ? $configKey : 'container';
$data = array_merge([
    // 基础配置（保留原有）
    'section_id' => $configKey,
    'section_title' => '',
    'section_subtitle' => '',
    'class' => '',
    'alignment' => 'left',

    // 布局配置
    'layout' => 'vertical', // vertical(竖向flex-col)/horizontal(横向flex-row)/grid(网格)
    'layout_config' => [
        'gap' => 'md',
        'wrap' => true,
        'flex_align' => 'start',
        'flex_justify' => 'start',
        'grid_columns' => ['base'=>1, 'sm'=>2, 'md'=>3, 'lg'=>4],
        'grid_rows' => 'auto'
    ],
    // 声明容器需要包含的子组件，支持多类型、多实例，每个组件可定义独立属性
    'dependencies' => [],
    'padding' => 'md',
    'radius' => 'md',
    'shadow' => 'md',
    'border' => ['enabled'=>false, 'width'=>'1', 'color'=>'gray-200'],
    'background' => ['type'=>'solid', 'value'=>'white', 'overlay'=>0],
    'content_max_width' => 'full',
    'content_class' => '',
], $pageConfig['components'][$configKey] ?? []);
// 内边距
$paddingClasses = ['sm'=>'py-6 px-4', 'md'=>'py-10 px-4', 'lg'=>'py-14 px-4', 'xl'=>'py-18 px-4', 'none'=>'p-0'];
$paddingClass = $paddingClasses[$data['padding']] ?? $paddingClasses['md'];

// 圆角、阴影、边框（移除背景设置）
$radiusClasses = ['sm'=>'rounded-sm', 'md'=>'rounded-lg', 'lg'=>'rounded-xl', 'full'=>'rounded-full', 'none'=>'rounded-none'];
$radiusClass = $radiusClasses[$data['radius']] ?? $radiusClasses['md'];
$shadowClasses = ['sm'=>'shadow-sm', 'md'=>'shadow-md', 'lg'=>'shadow-lg', 'xl'=>'shadow-xl', 'none'=>'shadow-none'];
$shadowClass = $shadowClasses[$data['shadow']] ?? $shadowClasses['md'];
$borderClass = $data['border']['enabled'] ? "border-{$data['border']['width']} border-{$data['border']['color']}" : '';

// 文本样式（移除背景相关判断）
$textColorClass = 'text-gray-900';
$section_subtitleColorClass = 'text-gray-600';
$alignmentClass = ['left'=>'text-left', 'center'=>'text-center mx-auto', 'right'=>'text-right ml-auto'][$data['alignment']] ?? 'text-left';

// 内容区最大宽度（逻辑不变）
$contentMaxWidthClasses = ['sm'=>'max-w-sm', 'md'=>'max-w-md', 'lg'=>'max-w-3xl', 'xl'=>'max-w-5xl', 'full'=>'max-w-full'];
$contentMaxWidthClass = $contentMaxWidthClasses[$data['content_max_width']] ?? $contentMaxWidthClasses['lg'];

// 容器整体布局（逻辑不变，控制依赖组件的排列）
$layoutConfig = $data['layout_config'];
$layoutClass = '';
$gapClasses = ['sm'=>'gap-2', 'md'=>'gap-4', 'lg'=>'gap-6', 'xl'=>'gap-8'];
$gapClass = $gapClasses[$layoutConfig['gap']] ?? $gapClasses['md'];
$wrapClass = $layoutConfig['wrap'] ? 'flex-wrap' : 'flex-nowrap';

switch ($data['layout']) {
    case 'vertical':
        $layoutClass = "flex flex-col {$gapClass} {$wrapClass} items-{$layoutConfig['flex_align']} justify-{$layoutConfig['flex_justify']}";
        break;
    case 'horizontal':
        $layoutClass = "flex flex-row {$gapClass} {$wrapClass} items-{$layoutConfig['flex_align']} justify-{$layoutConfig['flex_justify']}";
        break;
    case 'grid':
        $gridColumns = $layoutConfig['grid_columns'];
        $layoutClass = implode(' ', [
            'grid', $gapClass,
            "grid-cols-{$gridColumns['base']}",
            isset($gridColumns['sm']) ? "sm:grid-cols-{$gridColumns['sm']}" : '',
            isset($gridColumns['md']) ? "md:grid-cols-{$gridColumns['md']}" : '',
            isset($gridColumns['lg']) ? "lg:grid-cols-{$gridColumns['lg']}" : '',
            $layoutConfig['grid_rows'] === 'auto' ? 'grid-rows-auto' : "grid-rows-[{$layoutConfig['grid_rows']}]"
        ]);
        break;
}

// 合并容器基础类名（移除背景样式）
$baseClasses = implode(' ', [
    $paddingClass, $radiusClass, $shadowClass, $borderClass, $textColorClass, $data['class']
]);
?>

<!-- 通用容器组件（含依赖组件） -->
<section 
    id="<?php echo $data['section_id'] ?? '';?>"
    class="relative <?php echo $baseClasses; ?>"
>

    <!-- 容器内容区 -->
    <div class="<?php echo $contentMaxWidthClass; ?> mx-auto <?php echo $data['content_class']; ?>">
            <!-- 标题区（保留原有） -->
            <?php if (!empty($data['section_title']) || !empty($data['section_subtitle'])): ?>
            <div class="mb-8 <?php echo $alignmentClass; ?>">
                <?php if (!empty($data['section_title'])): ?>
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-3 tracking-tight"><?php echo $data['section_title']; ?></h2>
                <?php endif; ?>
                <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-[clamp(1rem,1.5vw,1.125rem)] <?php echo $section_subtitleColorClass; ?> leading-relaxed"><?php echo $data['section_subtitle']; ?></p>
                <?php endif; ?>
            </div>
            <?php endif; ?>

            <!-- 核心内容区：渲染所有依赖组件 -->
            <!-- 说明：.dependency-container 应用容器整体布局，内部子元素为依赖组件 -->
            <div class="dependency-container <?php echo $layoutClass; ?>">
                <?php if (!empty($data['dependencies'])): ?>
                    <?php foreach ($data['dependencies'] as $fragment): ?>
                        <?php
                        // 使用渲染组件函数
                        if (is_callable('renderComponent')) {
                            call_user_func('renderComponent', $fragment);
                        }
                        ?>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
</section>